<template>
    <div class="tabs">    
        <el-tabs  id="TabsId" @contextmenu.prevent.native="openContextMenu($event)" v-model="editableTabsValue" @tab-click="handleClick" @tab-remove = "removeTab">
            <el-tab-pane
                v-for="item in tagsList"
                :label="item.title"
                :name="item.path"
                :key="item.name"
                :path="item.path"
                :closable="item.canClose"            
            >
            <span slot="label" :id="'JEHC-SPAN-'+item.path">
                <!-- 增加tab 图标方式 -->
                <!-- <i :class="item.icon" :id="'JEHC-ICON-'+item.path  "></i>  -->
                <span :id="'JEHC-DRIVER-'+item.path  " class="tab-dividers" v-if="item.path != '/dashboard'"></span>
                <i :class="item.icon" :id="'JEHC-ICON-'+item.path  "></i>
                {{ item.title }}
            </span>
            </el-tab-pane>
        </el-tabs>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags" >
                <span class="svg-icon svg-icon-2x">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <defs/>
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect opacity="0.200000003" x="0" y="0" width="24" height="24"/>
                            <path d="M4.5,7 L9.5,7 C10.3284271,7 11,7.67157288 11,8.5 C11,9.32842712 10.3284271,10 9.5,10 L4.5,
                            10 C3.67157288,10 3,9.32842712 3,8.5 C3,7.67157288 3.67157288,7 4.5,7 Z M13.5,15 L18.5,15 C19.3284271,15 20,
                            15.6715729 20,16.5 C20,17.3284271 19.3284271,18 18.5,
                            18 L13.5,18 C12.6715729,18 12,17.3284271 12,16.5 C12,15.6715729 12.6715729,15 13.5,15 Z" fill="#000000" opacity="0.3"/>
                            <path d="M17,11 C15.3431458,11 14,9.65685425 14,8 C14,6.34314575 15.3431458,5 17,5 C18.6568542,5 20,6.34314575 20,
                            8 C20,9.65685425 18.6568542,11 17,11 Z M6,19 C4.34314575,19 3,17.6568542 3,16 C3,14.3431458 4.34314575,13 6,
                            13 C7.65685425,13 9,14.3431458 9,16 C9,17.6568542 7.65685425,19 6,19 Z" fill="#000000"/>
                        </g>
                    </svg>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-loading" command="refresh">刷 新</el-dropdown-item>
                    <el-dropdown-item v-if="isFull === 'full'" icon="el-icon-full-screen" :command="isFull">全 屏</el-dropdown-item>
                    <el-dropdown-item v-if="isFull === 'exitFull'" icon="el-icon-aim" :command="isFull">退出全屏</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-close" command="current">关闭当前</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-delete" command="other">关闭其它</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-delete-solid" command="all">关闭全部</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!-- 右键功能 -->
        <div v-show="contextMenuVisible">
            <ul :style="{left:menuLeft +'px',top:menuTop+'px'}" class="contextmenu">
                <li>
                    <el-button type="text" @click="refresh()" size="lager" icon="el-icon-loading">刷 新</el-button>
                </li>
                <li>
                    <el-button type="text" @click="requestFullScreen()" size="lager" v-if="isFull === 'full'" icon="el-icon-full-screen">全 屏</el-button>
                </li>
                <li>
                    <el-button type="text" @click="exitFullscreen" size="lager" v-if="isFull === 'exitFull'" icon="el-icon-aim">退出全屏</el-button>
                </li>
                <li>
                    <el-button v-if="rightCloseIndex !== '/dashboard'" type="text" @click="closeRightIndex()" size="lager" icon="el-icon-close">关 闭</el-button>
                </li>
                <li>
                    <el-button type="text" @click="closeRightOther()" size="lager" icon="el-icon-delete">关闭其它</el-button>
                </li>
                <li>
                    <el-button type="text" @click="closeAll()" size="lager" icon="el-icon-delete-solid" >关闭全部</el-button>
                </li>
            </ul>
        </div>
    </div>
    <!-- <div class="tags" v-if="showTags">
        <el-scrollbar :noresize="true">
            <ul>
                <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
                    <router-link :to="item.path" class="tags-li-title">
                        {{item.title}}
                    </router-link>
                    <span class="tags-li-icon" @click="closeTags(index)" v-if="item.canClose == true"><i class="el-icon-close"></i></span>
                </li>
            </ul>
        </el-scrollbar>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags">
                <span class="el-dropdown-link">
                    选项卡<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div> -->
</template>

<script>
    import { mapGetters } from "vuex";
    import bus from '@/core/util/bus';
    import { handleNotify, handleAlert, handleConfirm, showWating, closeWating, downloadFileCallFn } from "@/core/util/jehcUtil.js";
    export default {
        data() {
            return {
                leftWidth:270,
                topHeight:50,
                contextMenuVisible: false,
                menuLeft: 0,
                menuTop: 0,
                isFull:"full",
                rightCloseIndex:'',
                indexItem:{
                    title: '首页',
                    canClose:false,//是否可关闭
                    icon:'menu-icon flaticon2-architecture-and-city',//图标
                    path: '/dashboard',
                    name: '/dashboard'
                },
                editableTabsValue: '/dashboard',//默认当前Tab中打开的是首页
                tagsList: [{
                    title: '首页',
                    canClose:false,//是否可关闭
                    icon:'menu-icon flaticon2-architecture-and-city',//图标
                    path: '/dashboard',
                    name: '/dashboard'
                }]
            }
        },
        mounted() {
            let full = this.layoutConfig("subheader.width") === "fluid";

            let this_ = this;
            if(full){

                var windowWidth = KTUtil.getViewPort().width-260-50-10;

                document.getElementById("TabsId").style.width = windowWidth+"px";

                this.leftWidth = 270;
                this.topHeight = 50;

            }else{

                var windowWidth = KTUtil.getViewPort().width-50-80-10;

                document.getElementById("TabsId").style.width = windowWidth+"px";

                
                this.leftWidth = 70;
                this.topHeight = 50;
                
            }

            
           //根据自己需要来监听对应的key
            window.addEventListener("setItemEvent", (e) => {
                //e.key : 是值发生变化的key
                //e.newValue : 是可以对应的新值
                if (e.key === "setItemAsideMax") {
                    if(e.newValue === true){
                        var windowWidth = KTUtil.getViewPort().width-260-50-10;
                        document.getElementById("TabsId").style.width = windowWidth+"px";
                        this.leftWidth = 270;
                        this.topHeight = 50;
                        // console.log("最大化",windowWidth);
                    }else{
                        var windowWidth = KTUtil.getViewPort().width-50-80-10;
                        document.getElementById("TabsId").style.width = windowWidth+"px";
                        // console.log("最小化",windowWidth);
                
                        this.leftWidth = 70;
                        this.topHeight = 50;
                    }
                    // this.$store.commit("SET_ELDERUISTYLE", e.newValue) // 可搭配Vuex使用，以免初始化时值固定为默认值，而不是localstorage.setItem之后的值
                }

                if (e.key === "setItemMobile") {
                    if(e.newValue === true){//移动端
                        this_.tagsList =[];     
                        // console.log("移动端",this_.tagsList);                        
                        localStorage.setItem("TagsRouteList", JSON.stringify(this_.tagsList));

                    }else{//非移动端
                        this_.tagsList = [];
                        // console.log(this_.indexItem);
                        this_.tagsList.push(this_.indexItem);
                        if(this_.indexItem.path === this_.$route.path){//如果当前路由等于首页则无需存放至list中

                        }else{
                            //存放当前选项卡标签至缓存中
                            this_.tagsList.push( {
                                title: this_.$route.meta.title,
                                canClose: this_.$route.meta.canClose,//是否可关闭
                                icon: this_.$route.meta.icon,//图标
                                path: this_.$route.path,
                                name: this_.$route.matched[1].components.default.name || this_.$route.name
                            });
                        }
                        this_.editableTabsValue = this_.$route.path;
                        localStorage.setItem("TagsRouteCurrent", this_.editableTabsValue);
                        localStorage.setItem("TagsRouteList", JSON.stringify(this_.tagsList));
                        // console.log("非移动端",this_.$route);
                    }
                    // this.$store.commit("SET_ELDERUISTYLE", e.newValue) // 可搭配Vuex使用，以免初始化时值固定为默认值，而不是localstorage.setItem之后的值
                }
            })
            this.initTagsStore();//初始化内存中选项卡数据

            //  //给tab绑定右击事件
            // let tab_top_dom = document.getElementsByClassName('el-tabs__header is-top')
            // tab_top_dom[0].oncontextmenu = this.openContextMenu;

        },
        methods: {
            //解决空白标签页右键
            // openContextMenu1(e) {
            //     if (e.srcElement.id !='') {
            //         this.contextMenuVisible = true;
            //         this.rightCloseIndex=e.srcElement.id.split("-")[1];
            //         // console.log(this.rightCloseIndex);
            //     }else{
            //         this.contextMenuVisible = false;
            //     }
            // },
            //显示右击菜单（关闭所有）
            openContextMenu(e){
                if (e.srcElement.id !='') {
                    this.contextMenuVisible = true;
                    let id = e.srcElement.id.split("tab-")[1];
                    if(id && null !== id && '' !== id){                        
                        this.rightCloseIndex = id;
                    }else{
                        let spanId = e.srcElement.id.split("JEHC-SPAN-")[1];
                        let iconId = e.srcElement.id.split("JEHC-ICON-")[1];
                        let driversId = e.srcElement.id.split("JEHC-DRIVER-")[1];
                        if(spanId && spanId !== null && spanId !== ''){
                            this.rightCloseIndex = spanId;
                        }else if(iconId && iconId !== null && iconId!== ''){
                            this.rightCloseIndex = iconId;
                        }else if(driversId && driversId !== null && driversId!== ''){
                            this.rightCloseIndex = driversId;
                        }else{
                            this.rightCloseIndex = "";
                        }
                    }                    
                }else{
                    this.contextMenuVisible = false;
                }
                this.menuLeft = e.clientX-this.leftWidth;
                this.menuTop = e.clientY -this.topHeight;
                // e.preventDefault(); //防止默认菜单弹出
            },
            //隐藏菜单
            closeMenu(){
                this.contextMenuVisible = false
            },  
            handleClick(item){//点击事件
                this.$router.push(item.name);
            },
            removeTab(targetName){
                // const delItem = this.tagsList.splice(index, 1)[0];
                // const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
                // if (item) {
                //     delItem.path === this.$route.fullPath && this.$router.push(item.path);
                // }else{
                //     this.$router.push('/dashboard');
                // }
                // console.log(targetName);
                let tabs = this.tagsList;//当前所有Tabs
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }                
                this.editableTabsValue = activeName;
                this.tagsList = tabs.filter(tab => tab.name !== targetName);
                this.$router.push(activeName);//重新路由      
                this.setTagsStore();      
                // this.tagsList = [];
                // let thiz = this;
                // setTimeout(function(){//延时100ms 解决重复key问题
                //     for (let i in tabs) {
                //         if(tabs[i].name != targetName){                            
                //             thiz.tagsList.push({
                //                 title: tabs[i].title,
                //                 canClose:tabs[i].canClose,//是否可关闭
                //                 icon:tabs[i].icon,//图标
                //                 path: tabs[i].path,
                //                 name: tabs[i].name
                //             })
                //         }
                //     }                         
                //     thiz.$router.push(activeName);//重新路由               
                // },20);  
                this.closeMenu();
            },
            isActive(path) {
                return path === this.$route.fullPath;
            },
            // 关闭单个标签
            // closeTags(index) {
            //     const delItem = this.tagsList.splice(index, 1)[0];
            //     const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
            //     if (item) {
            //         delItem.path === this.$route.fullPath && this.$router.push(item.path);
            //     }else{
            //         this.$router.push('/dashboard');
            //     }
            // },
            // 关闭全部标签
            closeAll(){
                // this.tagsList = [];
                let dashboardItem = {};
                for (let i in this.tagsList) {
                    if(this.tagsList[i].path === "/dashboard"){
                        dashboardItem = this.tagsList[i];
                    }
                }
                this.tagsList = [];
                this.tagsList.push(dashboardItem);
                this.$router.push('/dashboard');
                this.closeMenu();
            },
            // 关闭其他标签
            closeOther(){
                this.tagsList  = this.tagsList.filter(item => {
                    return item.path === this.$route.fullPath || item.path === "/dashboard";
                })
                this.setTagsStore();     
                this.closeMenu();                
            },
            refresh(){
                this.$router.go(0);
                window.location.reload();
            },
            // 设置标签
            setTags(route){
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                })
                if(!isExist){
                    // if(this.tagsList.length >= 18){//最多18个
                    //     // this.tagsList.shift();
                    //     this.tagsList.splice(1,2);//删除倒数第二个
                    //     // this.tagsList.unshift(this.indexItem)
                    // }
                    this.tagsList.push({
                        title: route.meta.title,
                        canClose: route.meta.canClose,//是否可关闭
                        icon: route.meta.icon,//图标
                        path: route.path,
                        name: route.matched[1].components.default.name || route.name
                    })
                }   
                this.editableTabsValue = route.path;   
                bus.$emit('tags', this.tagsList);               
                
                //存放当前选项卡标签至缓存中
                this.setTagsStore();
                
                this.closeMenu();
                
            },
            // 关闭其他标签
            closeRightOther(){
                this.tagsList  = this.tagsList.filter(item => {
                    return item.path === this.rightCloseIndex || item.path === "/dashboard";
                })
                this.setRightTagsStore();     
                this.closeMenu();                
            },
            closeRightIndex(){
                if(this.rightCloseIndex === '/dashboard'){
                    handleAlert("当前页面为首页，不能关闭", "warning", 3);
                    return;
                }
                this.removeTab(this.rightCloseIndex);
            },
            handleTags(command){
                if(command === 'refresh'){//刷新
                    // let activeName = this.editableTabsValue;
                    // this.$router.push(activeName);
                    this.refresh();
                }
                if(command === 'other'){//关闭其它
                    this.closeOther();
                }
                if(command === 'current'){//关闭当前
                    if(this.editableTabsValue === '/dashboard'){
                        handleAlert("当前页面为首页，不能关闭", "warning", 3);
                        return;
                    }
                    this.removeTab(this.editableTabsValue);
                }
                if(command === 'all'){//刷新
                    this.closeAll();
                }
                if(command === 'full'){//全屏
                    this.requestFullScreen();
                }
                if(command === 'exitFull'){//退出全屏
                    this.exitFullscreen();
                }
            },
            requestFullScreen () {
                let de = document.documentElement
                if (de.requestFullscreen) {
                    de.requestFullscreen()
                } else if (de.mozRequestFullScreen) {
                    de.mozRequestFullScreen()
                } else if (de.webkitRequestFullScreen) {
                    de.webkitRequestFullScreen()
                }
                this.isFull = "exitFull"
            },
            exitFullscreen () {
                let de = document
                if (de.exitFullscreen) {
                    de.exitFullscreen()
                } else if (de.mozCancelFullScreen) {
                    de.mozCancelFullScreen()
                } else if (de.webkitCancelFullScreen) {
                    de.webkitCancelFullScreen()
                }
                this.isFull = 'full';
            },
            setTagsStore(){
                //存放当前选项卡标签至缓存中
                localStorage.setItem("TagsRouteCurrent", this.editableTabsValue);
                localStorage.setItem("TagsRouteList", JSON.stringify(this.tagsList));
            },
            setRightTagsStore(){
                let currentName = this.editableTabsValue;
                //存放当前选项卡标签至缓存中
                localStorage.setItem("TagsRouteCurrent", this.rightCloseIndex);
                localStorage.setItem("TagsRouteList", JSON.stringify(this.tagsList));
                if(currentName !== this.rightCloseIndex){
                    console.log("this.rightCloseIndex",this.rightCloseIndex);
                    this.$router.push(this.rightCloseIndex);
                }
            },
            initTagsStore(){
                let routers = localStorage.getItem("Routers");
                if(undefined === routers || null === routers || "" ===routers ){
                    this.editableTabsValue = "/dashboard";
                    this.tagsList.push(this.indexItem);
                }else{
                    let routersList = JSON.parse(routers);
                    let storeTags = localStorage.getItem("TagsRouteList");
                    let tagsRouteList = [];
                    let tagsRouteListTemp = [];
                    let tagsRouteCurrentTemp = "";
                    let tempItemList = [];

                    tagsRouteListTemp.push(this.indexItem);   
                    tempItemList.push(this.indexItem);   

                    if(undefined !== storeTags && null != storeTags && "" != storeTags){                   
                        tagsRouteList = JSON.parse(storeTags);                     
                        // console.log(this.tagsList);
                        // this.editableTabsValue = localStorage.getItem("TagsRouteCurrent");
                    }
                    for(let i in routersList){    
                        for(let j in tagsRouteList ){                 
                            if(routersList[i].componentRouter === tagsRouteList[j].path){
                                let item = {
                                    title: tagsRouteList[j].title,
                                    canClose: tagsRouteList[j].canClose,//是否可关闭
                                    icon: tagsRouteList[j].icon,//图标
                                    path: tagsRouteList[j].path,
                                    name: tagsRouteList[j].name
                                };
                                tagsRouteListTemp.push(item);   
                                tempItemList.push(item);   
                            }
                        }   
                    }            
                    if(null === tagsRouteListTemp|| tagsRouteListTemp.length <= 0){
                        tagsRouteListTemp.push(this.indexItem);
                    }        
                    // console.log("tagsRouteListTemp",tagsRouteListTemp);
                    this.tagsList = tagsRouteListTemp;//将过滤后的集合重新赋值
                    for(let i in this.tagsList){
                        if(this.tagsList[i].path === localStorage.getItem("TagsRouteCurrent")){
                            tagsRouteCurrentTemp = this.tagsList[i].path;
                            break;
                        }                        
                    }
                    // console.log("tagsRouteCurrentTemp",tagsRouteCurrentTemp); 
                    if(null === tagsRouteCurrentTemp || '' === tagsRouteCurrentTemp){
                        let lastItem = tempItemList.pop();
                        this.editableTabsValue = lastItem.path;
                    }else{
                        this.editableTabsValue = tagsRouteCurrentTemp;
                    }
                }  
                this.setTagsStore();              
            },
        },
        computed: {
            ...mapGetters(["layoutConfig", "getClasses"]),
            showTags() {
                return this.tagsList.length > 0;
            },
        },
        watch:{
            $route(newValue, oldValue){
                this.setTags(newValue);
            },  
            contextMenuVisible() { //监听 右键关闭菜单 点击任何地方 菜单消失
                if (this.contextMenuVisible) {
                    document.body.addEventListener("click", this.closeMenu);
                } else {
                    document.body.removeEventListener("click", this.closeMenu);
                }
            },
        },
        // created(){
        //     this.setTags(this.$route);
        //     // 监听关闭当前页面的标签页
        //     bus.$on('close_current_tags', () => {
        //         for (let i = 0, len = this.tagsList.length; i < len; i++) {
        //             const item = this.tagsList[i];
        //             if(item.path === this.$route.fullPath){
        //                 if(i < len - 1){
        //                     this.$router.push(this.tagsList[i+1].path);
        //                 }else if(i > 0){
        //                     this.$router.push(this.tagsList[i-1].path);
        //                 }else{
        //                     this.$router.push('/dashboard');
        //                 }
        //                 this.tagsList.splice(i, 1);
        //                 break;
        //             }
        //         }
        //     })
        // }
    }
</script>

<style scoped>
    /* el-tabs */
    ::v-deep .el-tabs__nav-scroll{
        /* background-color: #fff; */
        /* line-height: 38px;
        height: 38px; */
        /* padding: 20px 0; */
        margin-left: 0px;
    }
    ::v-deep .el-tabs__nav {
        /* margin: 0 10px; */
        /* line-height: 30px;
        height: 30px; */
    }
    ::v-deep .el-tabs__nav-wrap {
        margin-bottom: 0px;
    }
    ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 15px;
    }
    ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 15px;
    }
    /*悬浮样式*/
    ::v-deep .el-tabs__item:hover {
        color: #0f0f0f;
        background-color: #e5e5e5;
        font-size: 1.25rem;
    }
    ::v-deep .el-tabs__item:hover i{
        color: #0f0f0f;
        font-size:1rem;
    }
    /*选中样式*/
    ::v-deep .el-tabs__item.is-active {
        border-top: 0px solid rgb(77 89 149 / 6%);
        color: rgb(60 60 67 / 78%);
        background-color: #f5f5f5;
        font-size: 1.25rem;
    }
    ::v-deep .el-tabs__item.is-active i{
        color: rgb(60 60 67 / 78%);      
        font-size: 1.25rem;
    }
    /*隐藏tab下面的一横*/
    ::v-deep .el-tabs__active-bar {
        display: none;
    }
    ::v-deep .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
        background-color: #fff;
        /* background-color: #EBEDF3; */
    }
    /* ::v-deep .el-tabs__nav-wrap {
        top: 8px;
    } */
    ::v-deep .el-tabs__nav-next, .el-tabs__nav-prev { 
        padding: 0px 0 !important;       
        line-height: 40px !important;
        height: 40px !important;
    }
    ::v-deep .el-tabs__nav-prev {  
        line-height: 40px !important;
        height: 40px !important;
    }
    ::v-deep .el-tabs__item{       
        /** padding: 0 15px; 
        margin-left: 1px;
        margin-right: 1px;**/
        /** border-right: 1px solid #e4e6ef;
        border-left: 1px solid #e4e6ef;
        border-top: 1px solid #e4e6ef;
        border-bottom: 1px solid #e4e6ef; */
        border-radius: 5px;
        /* background: rgb(229, 231, 235); */
        /* background: #e4e6ef; */
        /* background: #f5f5f5; */
        /* background: #fff; 
        background: #fff;*/
        color: #181C32;
        line-height: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
    ::v-deep .el-tabs__item i{
        font-size: 1.25rem;
    }
    ::v-deep .el-tabs__header {
        margin: 0 0 0px;
    }
    .tabs{
        display: flex;
    }
    .tags-close-box {
        position: absolute;
        right: 0;
        line-height: 36px;
        height: 36px;
        flex: 0 0 auto;
        box-sizing: border-box;
        text-align: center;
        border-radius: 0px;
        z-index: 10;
        width:50px;
        white-space: nowrap;
    }

    .contextmenu {
      width: 120px;
        margin: 0;
        border: 0px solid #ccc;
        background: #fff;
        z-index: 3000;
        position: absolute;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 1.25rem;
        color: #333;
        /* box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2); */
    }
    .contextmenu li {
        margin: 0;
        padding: 0px 2px;
 
    }
    .contextmenu li:hover {
        background: #f2f2f2;
        cursor: pointer;
    }
    .contextmenu li button{
      color: #2c3e50;
    }
    .tab-dividers:before, .tab-dividers:after{
        position: absolute;
        content: '';
        top: 50%;
        right: -1px;
        left: -1px;
        height: 15px;
        border-left: 1px solid #e1e1e1; 
        transform: translateY(-50%);
    }
</style>